<template>
  <div>
    <el-table v-loading="listLoading" :data="tableHistoryList.data" border>
      <el-table-column
        label="序号"
        width="100"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="managerName"
        label="客户经理"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="salesmanName"
        width="300"
        label="办理业务员"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="financeUser"
        label="财务联系人"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="financePhone"
        label="财务联系方式"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="registerTime"
        label="注册日期"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="normalAccount"
        label="一般户"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="basicAccount"
        label="基本户"
      ></el-table-column
      >"
      <el-table-column
        align="center"
        prop="createTime"
        label="沟通时间"
      ></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pageRight"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30, 40]"
      :current-page="where.pageNum"
      :page-size="where.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableHistoryList.total"
    >
    </el-pagination>
    <historyDetail ref="historyDetailRef"></historyDetail>
  </div>
</template>
<script>
import historyDetail from "./historyDetail.vue";
import { companyRecordList } from "@/api/customer";
export default {
  name: "historyList",
  components: {
    historyDetail
  },
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      historyList: [],
      where: {
        pageNum: 1,
        pageSize: 10
      },
      tableHistoryList: {
        data: [],
        total: 0
      },
      listLoading: false
    };
  },
  created() {
    this.getHistoryList();
  },
  methods: {
    handleSizeChange(val) {
      this.where.pageSize = val;
      this.getHistoryList();
    },
    handleCurrentChange(val) {
      this.where.pageNum = val;
      this.getHistoryList();
    },
    detail(v) {
      this.$refs.historyDetailRef.openLog(v);
    },
    getHistoryList() {
      this.listLoading = true;
      let where = {
        companyId: this.id,
        ...this.where
      };
      companyRecordList(where)
        .then(res => {
          this.tableHistoryList.data = res.data.list;
          this.tableHistoryList.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 0 20px;
}
</style>
